<template>
    <div class="dashboard-container">
        <!-- 统计卡片 -->
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card class="stat-card" shadow="hover">
                    <div class="card-content">
                        <div class="icon-container blue">
                            <el-icon :size="28"><el-icon-goods /></el-icon>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value">{{ stats.products }}</div>
                            <div class="stat-label">商品总数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card class="stat-card" shadow="hover">
                    <div class="card-content">
                        <div class="icon-container green">
                            <el-icon :size="28"><el-icon-shop /></el-icon>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value">{{ stats.stores }}</div>
                            <div class="stat-label">商店总数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card class="stat-card" shadow="hover">
                    <div class="card-content">
                        <div class="icon-container orange">
                            <el-icon :size="28"><el-icon-video-camera /></el-icon>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value">{{ stats.videos }}</div>
                            <div class="stat-label">视频总数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card class="stat-card" shadow="hover">
                    <div class="card-content">
                        <div class="icon-container purple">
                            <el-icon :size="28"><el-icon-user /></el-icon>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value">{{ stats.users }}</div>
                            <div class="stat-label">会员总数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 图表区域 -->
        <el-row :gutter="20" class="chart-row">
            <el-col :span="12">
                <el-card shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <span>用户增长趋势</span>
                        </div>
                    </template>
                    <div class="chart-container">
                        <!-- 此处使用Echarts可视化用户增长趋势 -->
                        <div class="chart-placeholder">
                            <div class="chart-data-sample">
                                <div class="chart-bar" style="height: 30px;"></div>
                                <div class="chart-bar" style="height: 45px;"></div>
                                <div class="chart-bar" style="height: 60px;"></div>
                                <div class="chart-bar" style="height: 40px;"></div>
                                <div class="chart-bar" style="height: 55px;"></div>
                                <div class="chart-bar" style="height: 70px;"></div>
                                <div class="chart-bar" style="height: 80px;"></div>
                            </div>
                            <div class="chart-labels">
                                <span>1月</span>
                                <span>2月</span>
                                <span>3月</span>
                                <span>4月</span>
                                <span>5月</span>
                                <span>6月</span>
                                <span>7月</span>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="12">
                <el-card shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <span>商品销售分类占比</span>
                        </div>
                    </template>
                    <div class="chart-container">
                        <!-- 此处使用Echarts可视化销售分类占比 -->
                        <div class="chart-placeholder pie-chart">
                            <div class="pie-segment segment-1"></div>
                            <div class="pie-segment segment-2"></div>
                            <div class="pie-segment segment-3"></div>
                            <div class="pie-segment segment-4"></div>
                            <div class="pie-center"></div>
                        </div>
                        <div class="pie-legend">
                            <div class="legend-item"><span class="color-dot color-1"></span>狗粮</div>
                            <div class="legend-item"><span class="color-dot color-2"></span>猫粮</div>
                            <div class="legend-item"><span class="color-dot color-3"></span>宠物玩具</div>
                            <div class="legend-item"><span class="color-dot color-4"></span>其他</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 最近活动 -->
        <el-card shadow="hover" class="recent-activity">
            <template #header>
                <div class="card-header">
                    <span>最近活动</span>
                </div>
            </template>

            <el-table :data="recentActivities" style="width: 100%" stripe>
                <el-table-column prop="time" label="时间" width="180" />
                <el-table-column prop="user" label="用户" width="120" />
                <el-table-column prop="action" label="操作" />
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                        <el-tag :type="scope.row.status === '成功' ? 'success' : 'danger'">
                            {{ scope.row.status }}
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import {
    Goods as ElIconGoods,
    VideoCamera as ElIconVideoCamera,
    User as ElIconUser,
    Shop as ElIconShop
} from '@element-plus/icons-vue'

// 模拟数据
const stats = reactive({
    products: 256,
    stores: 18,
    videos: 72,
    users: 1521
})

const recentActivities = ref([
    {
        time: '2025-06-28 10:30:25',
        user: '管理员',
        action: '上传了新视频"可爱猫咪日常"',
        status: '成功'
    },
    {
        time: '2025-06-28 09:15:10',
        user: '管理员',
        action: '添加了新商品"高级猫粮500g"',
        status: '成功'
    },
    {
        time: '2025-06-27 16:45:32',
        user: '管理员',
        action: '修改了商店"爱宠之家"的信息',
        status: '成功'
    },
    {
        time: '2025-06-27 14:20:18',
        user: '管理员',
        action: '尝试删除商品"狗狗玩具球"',
        status: '失败'
    },
    {
        time: '2025-06-27 11:05:47',
        user: '管理员',
        action: '查看了用户"爱猫人士"的详情',
        status: '成功'
    }
])

// 在实际项目中，这里应该从API获取数据
onMounted(() => {
    // 获取仪表盘数据
    console.log('Dashboard mounted, fetch data here')
})

// 组件卸载前清理资源
onBeforeUnmount(() => {
    console.log('Dashboard unmounted, cleaning up resources')
    // 清理任何可能的定时器、事件监听器等资源
})
</script>

<style scoped>
.dashboard-container {
    padding: 20px;
}

.stat-card {
    margin-bottom: 20px;
}

.card-content {
    display: flex;
    align-items: center;
}

.icon-container {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    color: white;
}

.blue {
    background-color: #409EFF;
}

.green {
    background-color: #67C23A;
}

.orange {
    background-color: #E6A23C;
}

.purple {
    background-color: #9C27B0;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.2;
}

.stat-label {
    font-size: 14px;
    color: #909399;
}

.chart-row {
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.chart-container {
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.chart-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.chart-data-sample {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 80%;
}

.chart-bar {
    width: 30px;
    background-color: #409EFF;
    border-radius: 3px 3px 0 0;
    transition: height 0.5s;
}

.chart-bar:hover {
    background-color: #66b1ff;
}

.chart-labels {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    color: #909399;
}

.pie-chart {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 0 auto;
}

.pie-segment {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    clip: rect(0, 200px, 200px, 100px);
}

.segment-1 {
    background-color: #409EFF;
    clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 55%, 50% 50%);
    z-index: 4;
}

.segment-2 {
    background-color: #67C23A;
    clip-path: polygon(50% 50%, 100% 55%, 100% 100%, 65% 100%, 50% 50%);
    z-index: 3;
}

.segment-3 {
    background-color: #E6A23C;
    clip-path: polygon(50% 50%, 65% 100%, 0% 100%, 0% 65%, 50% 50%);
    z-index: 2;
}

.segment-4 {
    background-color: #F56C6C;
    clip-path: polygon(50% 50%, 0% 65%, 0% 0%, 50% 0%, 50% 50%);
    z-index: 1;
}

.pie-center {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: 50px;
    left: 50px;
    background-color: white;
    z-index: 5;
}

.pie-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin: 0 10px;
}

.color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 5px;
}

.color-1 {
    background-color: #409EFF;
}

.color-2 {
    background-color: #67C23A;
}

.color-3 {
    background-color: #E6A23C;
}

.color-4 {
    background-color: #F56C6C;
}

.recent-activity {
    margin-top: 20px;
}
</style>